<template>
  <div class="leave-info-container">
    <van-nav-bar
      class="app-nav-bar"
      title="请假详情"
      left-arrow
      @click-left="$router.back()"
    />
      <div class="tab_field">
        <van-form input-align="right">
        <van-field
          readonly
          clickable
          name="picker"
          :value="fieldInfo.type"
          label="请假类型"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="fieldInfo.lea_school"
          label="是否离校"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="start_date"
          label="开始时间"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="end_date"
          label="结束时间"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="fieldInfo.place"
          label="销假地点"
        />
        <van-field
          v-model="fieldInfo.sos_mobile"
          name="紧急联系人"
          label="紧急联系人"
        />
        <van-field
          v-model="fieldInfo.message"
          rows="2"
          autosize
          readonly
          label="请假事由"
          type="textarea"
          maxlength="50"
        />
        </van-form>
        <div class="field-btn" v-if="role === 'admin'">
          <van-button
            type="primary"
            @click="onSubmit('审核通过', '否')"
          >同意</van-button>
          <van-button
            type="warning"
            @click="onSubmit('审核失败', null)"
          >拒绝</van-button>
        </div>
      </div>
  </div>
</template>

<script>
import { getLeave, updateLeave } from '@/api/leave'
export default {
  name: 'leaveInfoIndex',
  components: {},
  props: {},
  data () {
    return {
      role: null,
      start_date: null,
      end_date: null,
      fieldInfo: {
        name: '',
        mobile: null,
        type: '事假', // 请假类型
        lea_school: '否', // 是否离校
        place: '', // 销假地点
        start_date: null,
        end_date: null,
        sos_mobile: '',
        message: '',
        examine: '审核中', // 审核情况
        status: null // 是否销假
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    this.role = this.$store.state.user.role
    // console.log(this.$route.query.id)
    getLeave({
      _id: this.$route.query.id
    }).then(res => {
      // console.log(res)
      this.fieldInfo = res.data.data[0]
      // console.log(this.getLocalTime(this.fieldInfo.start_date))
      this.start_date = this.getLocalTime(this.fieldInfo.start_date)
      this.end_date = this.getLocalTime(this.fieldInfo.end_date)
    })
  },
  mounted () {

  },
  methods: {
    onSubmit (v1, v2) {
      this.fieldInfo.examine = v1
      this.fieldInfo.status = v2
      console.log(this.fieldInfo)
      updateLeave(this.fieldInfo).then(res => {
        console.log(res)
        this.$toast.success({
          message: '审批成功'
        })
        history.go(-1)
      })
    },
    getLocalTime (v) {
      // console.log(this.fieldInfo.start_date)
      return new Date(parseInt(v)).toLocaleString().replace(/年|月/g, '-').replace(/日/g, ' ')
    }
  }
}
</script>

<style scoped lang="scss">
.van-cell {
  border-radius: 10px;
  margin: 10px 0;
}
.tab_field {
  padding: 0 10px;
}
.van-button--normal {
  width: 150px;
}
.field-btn {
  display: flex;
  justify-content: space-around;
}
</style>
